<template>
    <view class="licais">
        <view class="head">
            <view class="head1">精选理财</view>
            <view class="head2">查看更多</view>
        </view>
        <view class="content">
            <view class="box1"  v-for="item in datalist" :key="item.id">
                <view class="but"> {{item.text1}} </view>
                <view class="numbut"> {{item.text2}} </view>
                <view class="numbut1">{{item.text3}}</view>
                <view class="numbut2">
                    <text style="font-size: 22rpx; color: #cdcdcd"
                        >{{item.text4}}</text
                    >
                    <image
                        :src="item.url"
                        mode=""
                    ></image>
                </view>
            </view>
            <!-- <view class="box1">
                <view class="but"> 5G大时代 </view>
                <view class="numbut"> 27.88% </view>
                <view class="numbut1">华夏5G</view>
                <view class="numbut2">
                    <text style="font-size: 22rpx; color: #cdcdcd"
                        >近半年涨幅</text
                    >
                    <image
                        src="../../static/iamges/zhangfu.png"
                        mode=""
                    ></image>
                </view>
            </view> -->
            <!-- <view class="box1">
                <view class="but"> 抱茅台大腿 </view>
                <view class="numbut"> 26.13% </view>
                <view class="numbut1">招商白酒</view>
                <view class="numbut2">
                    <text style="font-size: 22rpx; color: #cdcdcd"
                        >近半年涨幅</text
                    >
                    <image
                        src="../../static/iamges/zhangfu.png"
                        mode=""
                    ></image>
                </view>
            </view> -->
        </view>
    </view>
</template>

<script>
export default {
    name: "conduct",
    data() {
        return {
            datalist:[
                {id:1,text1:'全民刚需',text2:'123.71%',text3:'广发医疗保健',text4:'近一年涨幅',url:'../../static/iamges/zhangfu.png'},
                {id:2,text1:'5G大时代',text2:'27.88%',text3:'华夏5G',text4:'近半年涨幅',url:'../../static/iamges/zhangfu.png'},
                {id:3,text1:'抱茅台大腿',text2:'26.13%',text3:'招商白酒',text4:'近半年涨幅',url:'../../static/iamges/zhangfu.png'}
            ]
        };
    },
};
</script>

<style lang="scss" scoped>
.licais {
    .head {
        display: flex;
        justify-content: space-between;
        margin-bottom: 24rpx;
        .head1 {
            font-size: 36rpx;
            color: #333333;
			font-weight: 700;
        }
        .head2 {
            font-size: 24rpx;
            color: #999999;
            padding-top: 5rpx;
            box-sizing: border-box;
        }
    }
    .content {
        display: flex;
        justify-content: space-between;
        .box1 {
			padding-top: 10rpx;
            width: 210rpx;
            height: 234rpx;
            border-radius: 20rpx;
            background-color: #ffffff;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .but {
                width: 174rpx;
                height: 42rpx;
                background-color: #ff623c;
                border-radius: 10rpx;
                color: #ffffff;
                font-size: 24rpx;
                text-align: center;
                line-height: 42rpx;
            }
            .numbut {
                color: #ff4658;
                font-size: 36rpx;
                margin-top: 26rpx;
                font-weight: 700;
            }
            .numbut1 {
                color: #333333;
                font-size: 24rpx;
                margin-top: 20rpx;
                display: flex;
            }
            .numbut2 {
                position: relative;
                image {
                    height: 20rpx;
                    width: 20rpx;
                    position: absolute;
                    right: -30rpx;
                    bottom: 2px;
                }
            }
        }
    }
}
</style>
